<template>
  <div id="nav">
    <div id="banner">
      <div class="swiper">
        <ul class="swiper-wrapper">
          <li class="swiper-slide" v-for="index in mess" :key="index">
            <img :src="index" alt="" />
          </li>
        </ul>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <ul>
      <li v-for="(item, index) in content" :key="index">
        <img :src="item.img" alt="" />
        <p>{{ item.text }}</p>
      </li>
    </ul>
  </div>
</template>
<script>
import Swiper from "../../node_modules/swiper/swiper-bundle";
export default {
  name: "Jingxuan",
  data() {
    return {
      mess: [
        "https://tx-free-imgs.acfun.cn/4mNY5Q5SMI-eEnuqu-2EVRRn-7Znaaa-VJzEZj.png?imageslim&imageView2/1/w/690/h/208/format/webp",
        "https://tx-free-imgs.acfun.cn/4mNY5Q5SMI-eEnuqu-2EVRRn-7Znaaa-VJzEZj.png?imageslim&imageView2/1/w/690/h/208/format/webp",
        "https://tx-free-imgs.acfun.cn/4mNY5Q5SMI-eEnuqu-2EVRRn-7Znaaa-VJzEZj.png?imageslim&imageView2/1/w/690/h/208/format/webp",
      ],
      content: [
        {
          img: "https://tx-free-imgs.acfun.cn/o_1ea9mvmai19911k0i1i51n1o1vju0.jpeg?imageslim&imageView2/1/w/375/h/211/format/webp",
          text: "每天一遍，智商再见！",
        },
        {
          img: "https://tx-free-imgs.acfun.cn/content/2021_03_28/1616897858375.gif?imageslim&imageView2/1/w/375/h/211/format/webp",
          text: "再靠近一点【花间酒】竖屏优颖酱",
        },
        {
          img: "https://tx-free-imgs.acfun.cn/newUpload/40834260_8b24305b933b4cbd802094edfec330f0.jpeg?imageslim&imageView2/1/w/375/h/211/format/webp",
          text: "[伊点军械X]前掠之翼：生于未来，亡于昨日",
        },
        {
          img: "https://tx-free-imgs.acfun.cn/o_1eu93nuup1l5nabl2lne5gql50.gif?imageslim&imageView2/1/w/375/h/211/format/webp",
          text: "台湾制造远洋下水才10秒就侧翻，欢呼声瞬间",
        },
        {
          img: "https://tx-free-imgs.acfun.cn/o_1f3uij6gvt4e1kljbmo1871ahi0.jpeg?imageslim&imageView2/1/w/375/h/211/format/webp",
          text: "【卡通】多可恨呐，做个人吧 滴53期",
        },
        {
          img: "https://tx-free-imgs.acfun.cn/TmuCnBZ5vL-IveaEb-6nIrm2-qYRFVv-AZnAve.jpg?imageslim&imageView2/1/w/375/h/211/format/webp",
          text: "开车必看0423：震惊！小姐姐解锁刹车新姿势",
        },
        {
          img: "https://tx-free-imgs.acfun.cn/newUpload/13474398_c0b4e57ea61c4100af67b7f956f452d2.jpeg?imageslim&imageView2/1/w/375/h/211/format/webp",
          text: "社死行为实录",
        },
        {
          img: "https://tx-free-imgs.acfun.cn/o_1f0na27asaph1igvcso5ji1qcu0.jpeg?imageslim&imageView2/1/w/375/h/211/format/webp",
          text: "广西南宁：高铁上完电脑突然热点没了...女子",
        },
        {
          img: "https://tx-free-imgs.acfun.cn/o_1f5doe11r10fd11ivtb8b47o6g0.jpeg?imageslim&imageView2/1/w/375/h/211/format/webp",
          text: "29岁网红泡泡龙之死：流量背后丑恶的人性，",
        },
        {
          img: "https://tx-free-imgs.acfun.cn/newUpload/1137919_450c0a12de47429e95766aec909882a1.jpeg?imageslim&imageView2/1/w/375/h/211/format/webp",
          text: "【它比官方动画早了整整十年！《啦啦啦德玛西亚》",
        },
        {
          img: "https://tx-free-imgs.acfun.cn/o_1eu93nuup1l5nabl2lne5gql50.gif?imageslim&imageView2/1/w/375/h/211/format/webp",
          text: "29岁网红泡泡龙之死：流量背后丑恶的人性，",
        },
        {
          img: "https://tx-free-imgs.acfun.cn/newUpload/13474398_c0b4e57ea61c4100af67b7f956f452d2.jpeg?imageslim&imageView2/1/w/375/h/211/format/webp",
          text: "【它比官方动画早了整整十年！《啦啦啦德玛西亚》",
        },
        {
          img: "https://tx-free-imgs.acfun.cn/TmuCnBZ5vL-IveaEb-6nIrm2-qYRFVv-AZnAve.jpg?imageslim&imageView2/1/w/375/h/211/format/webp",
          text: "开车必看0423：震惊！小姐姐解锁刹车新姿势",
        },
        {
          img: "https://tx-free-imgs.acfun.cn/o_1eu93nuup1l5nabl2lne5gql50.gif?imageslim&imageView2/1/w/375/h/211/format/webp",
          text: "台湾制造远洋下水才10秒就侧翻，欢呼声瞬间",
        },
        {
          img: "https://tx-free-imgs.acfun.cn/o_1eu93nuup1l5nabl2lne5gql50.gif?imageslim&imageView2/1/w/375/h/211/format/webp",
          text: "台湾制造远洋下水才10秒就侧翻，欢呼声瞬间",
        },
        {
          img: "https://tx-free-imgs.acfun.cn/o_1f3uij6gvt4e1kljbmo1871ahi0.jpeg?imageslim&imageView2/1/w/375/h/211/format/webp",
          text: "【卡通】多可恨呐，做个人吧 滴53期",
        }
      ],
    };
  },
  methods: {
    fn() {
      new Swiper(".swiper", {
        direction: "horizontal",
        loop: true,
        speed: 1000,
        autoplay: {
          delay: 2000,
        },
        pagination: {
          el: ".swiper-pagination",
        },
      });
    },
  },
  mounted() {
    this.fn();
  },
};
</script>
<style scoped>
@import "../../node_modules/swiper/swiper-bundle.css";
* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
img {
  display: block;
}
#nav {
  width: 640px;
  padding: 0 26px;
  box-sizing: border-box;
  margin: 0 auto;
}
#nav > #banner {
  width: 584px;
  height: 184px;
  margin-top: 170px;
  border-radius: 10px;
  overflow: hidden;
}
#nav #banner img {
  width: 100%;
  height: 100%;
}
#nav > ul {
  display: flex;
  justify-content: space-between;
  width: 584px;
  flex-wrap: wrap;
  margin-top: 10px;
}
#nav > ul li {
  width: 284px;
  height: 238px;
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
}
#nav ul li p {
  margin-top: 10px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
#nav ul img {
  width: 284px;
  height: 160px;
  border-radius: 5px;
}
</style>

